<template>
  <div class="page">
    <van-nav-bar
        title="我的汽车"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        right-text="新增"
        @click-right="onClickAdd"
    />
    <div class="car-list">
      <div
          v-for="car in carsList"
          :key="car.id"
          class="car-card"
          @click="showCarDetail(car)"
      >
        <div class="car-header">
          <div class="plate-label">车牌号：</div>
          <span class="plate-number">{{ car.carNo }}</span>
          <van-icon name="arrow" class="arrow-icon"/>
        </div>

        <div class="car-body">
          <div class="car-image-container">
            <img :src="car.avatarImg" class="car-image"/>
          </div>
          <div class="car-info">
            <div class="brand-info">
              <span class="brand-label">汽车详细信息展示</span>
            </div>
            <div class="car-desc">{{ car.modelParameters }}</div>
          </div>
        </div>
      </div>
    </div>

    <van-dialog
        v-model:show="showDialogAdd"
        title="添加车辆"
        class="add-car-dialog"
    >
      <div class="dialog-content">
        <div class="uploader-container">
          <van-uploader
              v-model="formData.images"
              :after-read="afterRead"
              max-count="1"
              :show-upload="true"
              :max-size="2 * 1024 * 1024"
              accept="image/*"
          />
        </div>
        <van-field
            v-model="formData.province"
            is-link
            readonly
            label="选择省份"
            placeholder="点击选择省份"
            @click="showPicker = true"
        />
        <van-field
            v-model="formData.carNo"
            label="车牌号"
            placeholder="请输入车牌号"
            :rules="[{ required: true, message: '请输入车牌号' }]"
        />
        <van-field
            v-model="formData.vehicleIdentifyNo"
            label="车架号"
            placeholder="请输入车架号"
            :rules="[{ required: true, message: '请输入车架号' }]"
        />
        <van-field
            v-model="formData.carBrandName"
            is-link
            readonly
            label="选择品牌"
            placeholder="点击选择品牌"
            @click="showBrandPicker = true"
        />
        <van-field
            v-model="formData.fuelTypeName"
            is-link
            readonly
            label="选择汽车类型"
            placeholder="点击选择汽车类型"
            @click="showCarTypePicker = true"
        />
        <van-field
            v-model="formData.displacementName"
            is-link
            readonly
            label="选择排量"
            placeholder="点击选择排量"
            @click="showDisplacementPicker = true"
        />
        <van-field
            v-model="formData.electromagneticTypeName"
            is-link
            readonly
            label="选择电池类型"
            placeholder="点击选择电池类型"
            @click="showBatteryTypePicker = true"
        />
        <!-- <van-field
            v-model="formData.batteryCapacityName"
            is-link
            readonly
            label="选择电池容量"
            placeholder="点击选择电池容量"
            @click="showBatteryCapacityPicker = true"
        /> -->
        <van-field
              v-model="formData.batteryCapacity"
              label="选择电池容量"
              placeholder="请输入电池容量"
              :rules="[{ required: true, message: '请输入电池容量' }]"
          />
        <van-field
            v-model="formData.ranges"
            label="续航里程"
            placeholder="请输入里程"
            :rules="[{ required: true, message: '请输入里程' }]"
        />
        <van-field
            v-model="formData.maxSpeed"
            label="最高车速"
            placeholder="请输入最高车速"
            :rules="[{ required: true, message: '请输入最高车速' }]"
        />
        <van-field
            v-model="formData.accelerationTime"
            label="加速时间"
            placeholder="请输入加速时间"
            :rules="[{ required: true, message: '请输入加速时间' }]"
        />
        <van-field
            v-model="formData.modelParameters"
            label="车辆参数"
            placeholder="请输入车辆参数"
            :rules="[{ required: true, message: '请输入车辆参数' }]"
        />
        <van-field
            v-model="formData.energyConsumptionDesc"
            label="能耗说明"
            placeholder="请输入能耗说明"
            :rules="[{ required: true, message: '请输入能耗说明' }]"
        />
        <van-field
            v-model="formData.otherDesc"
            label="其他说明"
            placeholder="请输入其他说明"
            :rules="[{ required: true, message: '请输入其他说明' }]"
        />
        <van-popup
            v-model:show="showPicker"
            position="bottom"
            round
            :style="{ maxHeight: '60%' }"
        >
          <div class="picker-wrapper">
            <div class="picker-header">
              <span class="cancel" @click="showPicker = false">取消</span>
              <span class="title">选择省份</span>
              <span class="confirm" @click="onConfirm">确定</span>
            </div>
            <div class="picker-content">
              <div
                  v-for="item in option1"
                  :key="item.id"
                  class="picker-item"
                  :class="{ 'active': tempSelected === item.province }"
                  @click="tempSelected = item.province"
              >
                {{ item.province }}
              </div>
            </div>
          </div>
        </van-popup>
        <van-popup
            v-model:show="showBrandPicker"
            position="bottom"
            round
            :style="{ maxHeight: '60%' }"
        >
          <div class="picker-wrapper">
            <div class="picker-header">
              <span class="cancel" @click="showBrandPicker = false">取消</span>
              <span class="title">选择品牌</span>
              <span class="confirm" @click="onBrandConfirm">确定</span>
            </div>
            <div class="picker-content">
              <div
                  v-for="brand in brandList"
                  :key="brand.id"
                  class="picker-item"
                  :class="{ 'active': tempSelectedBrand === brand.id }"
                  @click="tempSelectedBrand = brand.id,tempSelectedBrand2=brand.brandName"
              >
                {{ brand.brandName }}
              </div>
            </div>
          </div>
        </van-popup>
        <van-popup
            v-model:show="showCarTypePicker"
            position="bottom"
            round
            :style="{ maxHeight: '60%' }"
        >
          <div class="picker-wrapper">
            <div class="picker-header">
              <span class="cancel" @click="showCarTypePicker = false">取消</span>
              <span class="title">选择汽车类型</span>
              <span class="confirm" @click="onCarTypeConfirm">确定</span>
            </div>
            <div class="picker-content">
              <div
                  v-for="type in carTypeOptions"
                  :key="type.code"
                  class="picker-item"
                  :class="{ 'active': formData.fuelTypeName === type.text }"
                  @click="formData.fuelType = type.code,formData.fuelTypeName=type.text"
              >
                {{ type.text }}
              </div>
            </div>
          </div>
        </van-popup>
        <van-popup
            v-model:show="showDisplacementPicker"
            position="bottom"
            round
            :style="{ maxHeight: '60%' }"
        >
          <div class="picker-wrapper">
            <div class="picker-header">
              <span class="cancel" @click="showDisplacementPicker = false">取消</span>
              <span class="title">选择排量</span>
              <span class="confirm" @click="onDisplacementConfirm">确定</span>
            </div>
            <div class="picker-content">
              <div
                  v-for="displacement in displacementOptions"
                  :key="displacement.code"
                  class="picker-item"
                  :class="{ 'active': formData.displacementName === displacement.text }"
                  @click="formData.displacement = displacement.code,formData.displacementName=displacement.text"
              >
                {{ displacement.text }}
              </div>
            </div>
          </div>
        </van-popup>
        <van-popup
            v-model:show="showBatteryTypePicker"
            position="bottom"
            round
            :style="{ maxHeight: '60%' }"
        >
          <div class="picker-wrapper">
            <div class="picker-header">
              <span class="cancel" @click="showBatteryTypePicker = false">取消</span>
              <span class="title">选择电池类型</span>
              <span class="confirm" @click="onBatteryTypeConfirm">确定</span>
            </div>
            <div class="picker-content">
              <div
                  v-for="battery in batteryOptions"
                  :key="battery.code"
                  class="picker-item"
                  :class="{ 'active': formData.electromagneticTypeName === battery.text }"
                  @click="formData.electromagneticType = battery.code,formData.electromagneticTypeName=battery.text"
              >
                {{ battery.text }}
              </div>
            </div>
          </div>
        </van-popup>
        <!-- <van-popup
            v-model:show="showBatteryCapacityPicker"
            position="bottom"
            round
            :style="{ maxHeight: '60%' }"
        > -->
          <!-- <div class="picker-wrapper">
            <div class="picker-header">
              <span class="cancel" @click="showBatteryCapacityPicker = false">取消</span>
              <span class="title">选择电池容量</span>
              <span class="confirm" @click="onBatteryCapacityConfirm">确定</span>
            </div>
            <div class="picker-content">
              <div
                  v-for="capacity in batteryCapacityOptions"
                  :key="capacity.code"
                  class="picker-item"
                  :class="{ 'active': formData.batteryCapacityName === capacity.text }"
                  @click="formData.batteryCapacity = capacity.code,formData.batteryCapacityName=capacity.text"
              >
                {{ capacity.text }}
              </div>
            </div>
          </div> -->
        <!-- </van-popup> -->
      </div>
      <template #footer>
        <div style="display: flex; justify-content: space-between; padding: 16px;">
          <van-button type="default" @click="showDialogAdd = false">取消</van-button>
          <van-button type="primary" @click="onConfirmend" :disabled="isConfirmDisabled">确认</van-button>
        </div>
      </template>
    </van-dialog>

    <!-- 汽车详细信息展示 -->
    <van-dialog
        v-model:show="showDialog"
        :show-confirm-button="false"
        class="car-detail-dialog"
    >
      <div class="dialog-content" v-if="selectedCar">
        
        <div class="car-image-container" @click="triggerUpload" style="cursor: pointer;">
          <img :src="selectedCar.avatarImg" class="car-image" />
        </div>
        
        <van-uploader
          v-model="formData.images"
          :after-read="afterRead2"
          max-count="1"
          show-upload
          :max-size="2 * 1024 * 1024"
          accept="image/*"
          ref="uploader"
          style="display: none;"
        />
        
        <van-field
            v-model="selectedCar.province"
            is-link
            readonly
            label="选择省份"
            placeholder="点击选择省份"
            @click="showPicker = true"
        />
        <van-field
            v-model="selectedCar.carNo"
            label="车牌号"
            placeholder="请输入车牌号"
            :rules="[{ required: true, message: '请输入车牌号' }]"
        />
        <van-field
            v-model="selectedCar.carBrandName"
            is-link
            readonly
            label="选择品牌"
            placeholder="点击选择品牌"
            @click="showBrandPicker = true"
        />
        <van-field
            v-model="selectedCar.vehicleIdentifyNo"
            label="车架号"
            placeholder="请输入车架号"
            :rules="[{ required: true, message: '请输入车架号' }]"
        />
        <van-field
          v-model="selectedCar.fuelTypeName"
          is-link
          readonly
          label="选择汽车类型"
          placeholder="点击选择汽车类型"
          @click="showCarTypePicker = true"
      />
      <van-field
          v-model="selectedCar.displacementName"
          is-link
          readonly
          label="选择排量"
          placeholder="点击选择排量"
          @click="showDisplacementPicker = true"
      />
      <van-field
          v-model="selectedCar.electromagneticTypeName"
          is-link
          readonly
          label="选择电池类型"
          placeholder="点击选择电池类型"
          @click="showBatteryTypePicker = true"
      />
      <!-- <van-field
          v-model="selectedCar.batteryCapacityName"
          is-link
          readonly
          label="选择电池容量"
          placeholder="点击选择电池容量"
          @click="showBatteryCapacityPicker = true"
      /> -->
      <van-field
            v-model="selectedCar.batteryCapacity"
            label="选择电池容量"
            placeholder="请输入电池容量"
            :rules="[{ required: true, message: '请输入电池容量' }]"
        />

      <van-field
          v-model="selectedCar.ranges"
          label="续航里程"
          placeholder="请输入里程"
          :rules="[{ required: true, message: '请输入里程' }]"
      />
      <van-field
          v-model="selectedCar.maxSpeed"
          label="最高车速"
          placeholder="请输入最高车速"
          :rules="[{ required: true, message: '请输入最高车速' }]"
      />
      <van-field
          v-model="selectedCar.accelerationTime"
          label="加速时间"
          placeholder="请输入加速时间"
          :rules="[{ required: true, message: '请输入加速时间' }]"
      />
      <van-field
          v-model="selectedCar.modelParameters"
          label="车辆参数"
          placeholder="请输入车辆参数"
          :rules="[{ required: true, message: '请输入车辆参数' }]"
      />
      <van-field
          v-model="selectedCar.energyConsumptionDesc"
          label="能耗说明"
          placeholder="请输入能耗说明"
          :rules="[{ required: true, message: '请输入能耗说明' }]"
      />
      <van-field
          v-model="selectedCar.otherDesc"
          label="其他说明"
          placeholder="请输入其他说明"
          :rules="[{ required: true, message: '请输入其他说明' }]"
      />


      </div>
      <van-popup
          v-model:show="showPicker"
          position="bottom"
          round
          :style="{ maxHeight: '60%' }"
      >
        <div class="picker-wrapper">
          <div class="picker-header">
            <span class="cancel" @click="showPicker = false">取消</span>
            <span class="title">选择省份</span>
            <span class="confirm" @click="onConfirm">确定</span>
          </div>
          <div class="picker-content">
            <div
                v-for="item in option1"
                :key="item.id"
                class="picker-item"
                :class="{ 'active':selectedCar.province === item.province }"
                @click="selectedCar.province = item.province"
            >
              {{ item.province }}
            </div>
          </div>
        </div>
      </van-popup>
      <van-popup
          v-model:show="showBrandPicker"
          position="bottom"
          round
          :style="{ maxHeight: '60%' }"
      >
        <div class="picker-wrapper">
          <div class="picker-header">
            <span class="cancel" @click="showBrandPicker = false">取消</span>
            <span class="title">选择品牌</span>
            <span class="confirm" @click="onBrandConfirm2">确定</span>
          </div>
          <div class="picker-content">
            <div
                v-for="brand in brandList"
                :key="brand.id"
                class="picker-item"
                :class="{ 'active': selectedCar.carBrandId === brand.id }"
                @click="selectedCar.carBrandId = brand.id,selectedCar.carBrandName=brand.brandName"
            >
              {{ brand.brandName }}
            </div>
          </div>
        </div>
      </van-popup>
      <van-popup
          v-model:show="showCarTypePicker"
          position="bottom"
          round
          :style="{ maxHeight: '60%' }"
      >
        <div class="picker-wrapper">
          <div class="picker-header">
            <span class="cancel" @click="showCarTypePicker = false">取消</span>
            <span class="title">选择汽车类型</span>
            <span class="confirm" @click="onCarTypeConfirm">确定</span>
          </div>
          <div class="picker-content">
            <div
                v-for="type in carTypeOptions"
                :key="type.code"
                class="picker-item"
                :class="{ 'active': selectedCar.fuelTypeName === type.text }"
                @click="selectedCar.fuelType = type.code,selectedCar.fuelTypeName=type.text"
            >
              {{ type.text }}
            </div>
          </div>
        </div>
      </van-popup>

      <van-popup
          v-model:show="showDisplacementPicker"
          position="bottom"
          round
          :style="{ maxHeight: '60%' }"
      >
        <div class="picker-wrapper">
          <div class="picker-header">
            <span class="cancel" @click="showDisplacementPicker = false">取消</span>
            <span class="title">选择排量</span>
            <span class="confirm" @click="onDisplacementConfirm">确定</span>
          </div>
          <div class="picker-content">
            <div
                v-for="displacement in displacementOptions"
                :key="displacement.code"
                class="picker-item"
                :class="{ 'active': selectedCar.displacementName === displacement.text }"
                @click="selectedCar.displacement = displacement.code,selectedCar.displacementName=displacement.text"
            >
              {{ displacement.text }}
            </div>
          </div>
        </div>
      </van-popup>
      <van-popup
          v-model:show="showBatteryTypePicker"
          position="bottom"
          round
          :style="{ maxHeight: '60%' }"
      >
        <div class="picker-wrapper">
          <div class="picker-header">
            <span class="cancel" @click="showBatteryTypePicker = false">取消</span>
            <span class="title">选择电池类型</span>
            <span class="confirm" @click="onBatteryTypeConfirm">确定</span>
          </div>
          <div class="picker-content">
            <div
                v-for="battery in batteryOptions"
                :key="battery.code"
                class="picker-item"
                :class="{ 'active': selectedCar.electromagneticTypeName === battery.text }"
                @click="selectedCar.electromagneticType = battery.code,selectedCar.electromagneticTypeName=battery.text"
            >
              {{ battery.text }}
            </div>
          </div>
        </div>
      </van-popup>
      <!-- <van-popup
          v-model:show="showBatteryCapacityPicker"
          position="bottom"
          round
          :style="{ maxHeight: '60%' }"
      > -->
        <!-- <div class="picker-wrapper">
          <div class="picker-header">
            <span class="cancel" @click="showBatteryCapacityPicker = false">取消</span>
            <span class="title">选择电池容量</span>
            <span class="confirm" @click="onBatteryCapacityConfirm">确定</span>
          </div>
          <div class="picker-content">
            <div
                v-for="capacity in batteryCapacityOptions"
                :key="capacity.code"
                class="picker-item"
                :class="{ 'active': selectedCar.batteryCapacityName === capacity.text }"
                @click="selectedCar.batteryCapacity = capacity.code,selectedCar.batteryCapacityName=capacity.text"
            >
              {{ capacity.text }}
            </div>
          </div>
        </div> -->
      <!-- </van-popup> -->
      <template #footer>
        <div style="display: flex; justify-content: space-between; padding: 16px;">
          <van-button  @click="handleCancel">取消</van-button>
          <van-button  @click="onConfirmUpdate" >修改</van-button>
        </div>
      </template>
    </van-dialog>
  </div>
</template>

<script>
import {GetBrandList, GetCarAdd, GetCarSaveMinio, GetCarsList, GetCarsProvince, GetCarsUpdate, GetLicensePlate} from "@/api/user";
import {DropdownMenu, DropdownItem, Uploader } from 'vant';

export default {
  components: {
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Uploader.name]: Uploader,
  },
  data() {
    return {
      carsList: [],
      loading: false,
      showDialog: false,
      showDialogAdd: false,
      selectedCar: null,
      showPicker: false,
      showBrandPicker: false,
      showCarTypePicker: false,
      showDisplacementPicker: false,
      showBatteryTypePicker: false,
      showBatteryCapacityPicker: false,
      brandList: [],
      carTypeOptions: [
        {code: 1, text: "汽油"},
        {code: 2, text: "柴油"},
        {code: 3, text: "混合动力"},
        {code: 4, text: "插电混动"},
        {code: 5, text: "增程式"},
        {code: 6, text: "纯电动"},
        {code: 7, text: "氢燃料电池"},
      ],
      displacementOptions: [
        {code: 1, text: "1L以下"},
        {code: 2, text: "1.0~1.6L"},
        {code: 3, text: "1.6~2.5L"},
        {code: 4, text: "2.5~4L"},
        {code: 5, text: "4.0L以上"},
      ],
      batteryOptions: [
        {code: 1, text: "铅酸电池"},
        {code: 2, text: "镍氢电池"},
        {code: 3, text: "锂钴电池"},
        {code: 4, text: "锂锰离子电池"},
        {code: 5, text: "锂铁磷酸电池"},
        {code: 6, text: "三元锂离子电池"},
      ],
      batteryCapacityOptions: [
        {code: 1, text: "40kWh以下"},
        {code: 2, text: "40kWh-70kWh"},
        {code: 3, text: "70kWh以上"},
      ],
      tempSelected: '',
      tempSelectedBrand: '',
      tempSelectedBrand2: '',
      formData: {
        province: '',
        carNo: '',
        vehicleIdentifyNo: '',
        carBrandId: '',
        carBrandName: '',
        fuelType: '',
        fuelTypeName: '',
        displacement: '',
        displacementName: '',
        electromagneticType: '',
        electromagneticTypeName: '',
        batteryCapacity: '',
        ranges: '',
        maxSpeed: '',
        accelerationTime: '',
        modelParameters: '',
        energyConsumptionDesc: '',
        otherDesc: '',
        avatarImg: ''
      },
      option1: [],
    }
  },
  computed: {
    isConfirmDisabled() {
      return !this.formData.carNo ||
          !this.formData.vehicleIdentifyNo ||
          !this.formData.carBrandName ||
          !this.formData.fuelTypeName ||
          !this.formData.displacementName ||
          !this.formData.electromagneticTypeName ||
          // !this.formData.batteryCapacityName ||
          !this.formData.batteryCapacity ||
          !this.formData.ranges ||
          !this.formData.maxSpeed ||
          !this.formData.accelerationTime ||
          !this.formData.modelParameters ||
          !this.formData.energyConsumptionDesc ||
          !this.formData.otherDesc;
    }
  },
  methods: {
    onClickLeft() {
      this.$router.back()
    },
    onClickAdd() {
      this.showDialogAdd = true;

    },
    onBrandList() {
      GetBrandList().then(res => {
        if (res.data.code === 200000) {
          this.brandList = res.data.data;
        } else {
          console.log('获取品牌列表失败');
        }
      })
    },
    getLicensePlate() {
      GetLicensePlate().then(res => {
        if (res.data.code === 200000) {
          this.option1 = res.data.data;
        } else {
console.log("获取车牌列表失败");
        }
      });
    },
    onConfirm() {
      this.formData.province = this.tempSelected;
      console.log('其他说明:', this.formData.otherDesc);
      console.log('表单数据:', this.formData);
      this.showPicker = false;
    },
    onConfirmend() {
      console.log('其他说明:', this.formData.otherDesc);
      console.log('表单数据:', this.formData);
      GetCarAdd(this.formData).then(res => {
        if (res.data.code === 200000) {
          this.getCarsList();
        } else {
          console.log("添加车辆失败");
          
        }
      });
      this.showDialogAdd = false;
    },

    onConfirmUpdate() {

      console.log(this.selectedCar);

      GetCarsUpdate(this.selectedCar).then(res => {
        if (res.data.code === 200000) {
          this.showDialog = false;
          this.getCarsList();
        }
      });
    },

    onBrandConfirm() {
      if (this.tempSelectedBrand) {
        this.formData.carBrandId = this.tempSelectedBrand;
        this.formData.carBrandName = this.tempSelectedBrand2;
        this.showBrandPicker = false;
      }
    },
    onBrandConfirm2() {
        this.showBrandPicker = false;
      
    },
    onCarTypeConfirm() {
      this.showCarTypePicker = false;
    },
    onDisplacementConfirm() {
      this.showDisplacementPicker = false;
    },
    onBatteryTypeConfirm() {
      this.showBatteryTypePicker = false;
    },
    onBatteryCapacityConfirm() {
      console.log('选择的电池容量:', this.formData.batteryCapacity);
      this.showBatteryCapacityPicker = false;
    },
    getCarsList() {
      this.loading = true;
      GetCarsList()
          .then(res => {
            if (res.data.code === 200000) {
              this.carsList = res.data.data;
            } else {
           console.log("获取车辆列表失败");
           
             }
          })
          .finally(() => {
            this.loading = false;
          });
    },
    showCarDetail(car) {

      console.log("====="+car.carNo)
      GetCarsProvince(car).then(res => {
        console.log(res)
        this.selectedCar.province=res.data.data.province
        this.selectedCar.carNo=res.data.data.carNo
      })

      this.selectedCar = car;
      this.showDialog = true;
    },
    afterRead(file) {
      const formData = new FormData();
      formData.append('file', file.file);

      GetCarSaveMinio(formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        this.formData.avatarImg = response.data.data;
        console.log('上传成功', response.data.data);
      }).catch(error => {
        console.error('上传失败', error);
      });
    },
    afterRead2(file) {
      const formData = new FormData();
      formData.append('file', file.file);

      GetCarSaveMinio(formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        this.selectedCar.avatarImg = response.data.data;
        console.log('上传成功', response.data.data);
      }).catch(error => {
        console.error('上传失败', error);
      });
    },
    triggerUpload() {
      this.$refs.uploader.chooseFile();
    },
    handleCancel() {
      this.showDialogAdd = false;
      this.showDialog = false;
      this.getCarsList();
    }
  },
  created() {
    this.getCarsList();
    this.getLicensePlate();
    this.onBrandList();
  }
}
</script>

<style scoped>
.page {
  background: #f5f5f5;
  min-height: 100vh;
}

.car-list {
  padding: 16px;
}

.car-card {
  background: white;
  border-radius: 12px;
  margin-bottom: 16px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.car-card:active {
  transform: scale(0.98);
}

.car-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  padding: 8px 0;
}

.plate-label {
  font-size: 14px;
  color: #666;
}

.plate-number {
  flex: 1;
  font-size: 20px;
  font-weight: 500;
  color: #333;
  margin: 0 8px;
}

.arrow-icon {
  color: #999;
}

.car-body {
  display: flex;
  gap: 12px;
}

.car-image-container {
  flex: 0 0 120px;
  height: 80px;
  border-radius: 4px;
  overflow: hidden;
}

.brand-info {
  margin-bottom: 8px;
}

.brand-label {
  font-size: 14px;
  color: #666;
  margin-right: 8px;
}

.brand-name {
  font-size: 14px;
  color: #333;
}

.car-desc {
  font-size: 13px;
  color: #666;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.car-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.car-card:hover .car-image {
  transform: scale(1.05);
}

.car-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 导航样式优化 */
:deep(.van-nav-bar) {
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

:deep(.van-nav-bar__title) {
  font-weight: 600;
}

:deep(.van-tag--primary) {
  display: none;
}

.car-detail-dialog {
  border-radius: 12px;
}

.dialog-content {
  max-height: 60vh;
  overflow-y: auto;
  padding: 16px;
}

.dialog-item {
  margin-bottom: 12px;
  line-height: 1.5;
}

.dialog-item .label {
  color: #666;
  margin-right: 8px;
}

:deep(.van-dialog__header) {
  padding: 16px;
  font-weight: 500;
  font-size: 18px;
}

:deep(.van-field__label) {
  width: 4.5em;
}

:deep(.van-picker__toolbar) {
  padding: 16px;
}

:deep(.van-picker__title) {
  font-size: 16px;
  font-weight: 500;
}

:deep(.van-picker-column__item) {
  padding: 0 16px;
}

.picker-wrapper {
  background-color: #fff;
}

.picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 44px;
  padding: 0 16px;
  background-color: #f7f8fa;
  border-bottom: 1px solid #ebedf0;
}

.picker-header .cancel {
  color: #969799;
  font-size: 14px;
}

.picker-header .title {
  font-weight: 500;
  font-size: 16px;
}

.picker-header .confirm {
  color: #1989fa;
  font-size: 14px;
}

.picker-content {
  max-height: 50vh;
  overflow-y: auto;
  padding: 10px 0;
}

.picker-item {
  padding: 10px 16px;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
}

.picker-item.active {
  color: #1989fa;
  background-color: #f7f8fa;
}

.picker-item:active {
  background-color: #f2f3f5;
}

:deep(.van-cell__title) {
  flex: none;
  width: 4.5em;
}

:deep(.van-field__control) {
  text-align: left;
}

.province-image {
  width: 100%;
  height: auto;
  margin-bottom: 16px;
}

.uploader-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16px;
}

.add-car-dialog .dialog-content {
  max-height: 60vh;
  overflow-y: auto;
  padding: 16px;
}

</style>